#vertical timeline

[divinector]

Responsive Vertical Timeline using HTML CSS

[joons]

blue swirl lucky suit, you got me right where you want me.

[dandelionjack]

yayyy the shining! minotaur! labyrinth! house of leaves! running down impossible yellow-walled corridors! malevolent architecture!

[bmpmp3]

EXTREMELY low effort plug n play cover with very default settings mixing i did in like 20 min but im trying out voisona and holy shit tsudumi's 2.0 sounds SO so good

honeymoon un deux trois by dateken (original vocal rin), UST by purblexber

[timelineblock]

Transform your content presentation with the Gutenberg Timeline Plugin, featuring the all-new curve timeline feature! Effortlessly design stunning, curved timelines that captivate your audience and beautifully showcase your company's history, project milestones, or any chronological events. This easy-to-use plugin seamlessly integrates with Gutenberg, empowering you to craft dynamic timelines without any coding. Download now and elevate your WordPress website with captivating curve timelines!

[jnexttech]

A Visual Journey with Gutenberg Timeline Plugin

Enhance your website with the dynamic and visually engaging JNext Timeline Block Plugin. This powerful tool allows you to effortlessly showcase chronological events, milestones, and achievements in a sleek and customizable timeline format. Captivate your audience with interactive timelines that seamlessly integrate into your site, offering a compelling storytelling experience. Whether you're a blogger, business professional, or educator, the JNext Timeline Block Plugin is the perfect solution to bring your content to life. With user-friendly customization options and responsive design, create a captivating narrative that leaves a lasting impression on your visitors. Elevate your website's storytelling potential with the JNext Timeline Block Plugin – where past, present, and future seamlessly converge in a visually stunning display.

[payidaresque]

WHAT THE FUCK THIS IS ACTUALLY SO COMFORTABLE????????\

[attackoneyebrows]

sometimes i feel like tiktok popularized after effects in such a weird way that makes almost zero sense to me like most people are just using it for some transitions or text effects (which btw can be done entirely in premiere pro and faster) and completely overlooking the really cool motion tracking / masking / comprehensive list of visual effects it can produce which is kinda the intended purpose

[taylorswiftstyle]

Out and about | New York City, NY | November 19, 2024

Carolina Herrera ‘Check Pattern Coat’ - $3,290.00 Carolina Herrera ‘Plaid Mini Skirt’ - $990.00 Effy Jewelry ‘Signature 14K Yellow Gold Sapphire and Diamond Panther Necklace’ - $10.995.00 Louis Vuitton ‘Tambour Watch’ - $54,000.00 Fendi ‘Peekaboo ISeeU Petite Bag’ - $4,400.00 Gucci ‘Horsebit Platform Loafer Slingback’ - $1,500.00

When I tell you how delighted I was to see Taylor in yet another copy + paste (mostly) outfit (Spoiler: It’s the shoes for me). This week, Taylor was spotted out to dinner with friends in NYC, just ahead of her second round of dates in Toronto, ON - her penultimate city stop on the Eras Tour.

This outfit drew my eye for a number of reasons.

The first of course is because I would absolutely employ this outfit into my own fall/winter fashion. An outfit that’s black and white and plaid all over? Yes, sign me up.

The second is because of the fantastic way it slots in neatly in her fashion timeline from her previous ‘candid’ outing at the Chiefs vs Broncos game on November 10. Building a recognizable style and brand takes consistency and repetition! Note the matching patterned outerwear + skirt as the major “moment” which are then grounded by black accessories (top, bag, shoes). The extra kiss is the repeat watch which Taylor notably debuted at the game (watches are an accessory vertical she’s never explored previous).

But mostly, I was so happy to see Carolina Herrera pop up as a designer in Taylor’s rotation again. She’s previously worn CH only sparingly. The most notable times were her at the 2014 Golden Globes and a handful of appearances in CH outerwear in 2014 and 2019. I’ve always been a fan of their elegant, timeless designs so I’m thrilled to see her getting rotation here.

Taylor has had a few statement chains on rotation in the last year or so that often feature similar characteristics. Typically gold with diamond embellishments and a central, front attachment. This particular one is conjoined by two panther heads which kind of remind me of the big cat emblem that are featured on the colourful 1989 2.0 sets by Roberto Cavalli she wears on the Eras Tour.

Over the last year, Taylor has upped her jewelry game and has explored the art of the stack in various categories (necklaces, earrings, bracelets). But one category that is entirely new to her? Watches. In my memory, the only time I can recall Taylor coming close to watches is when they were formatted into different settings like, say, a vintage watch face restrung onto a necklace pendant.

You might remember that Taylor first debuted this particular watch at the Chiefs vs Broncos game on November 10, 2024. That particular outfit feels notably similar to this one for the way it employs a coordinating patterned “set” of outerwear and skirt grounded by black accessories. A very signature / slideshow moment that immediately calls back to one of her recent appearances.

As a personal copy + paste, my preferences would stop at the ankle. While I typically like a more minimal shoe, the chunky loafer style is very recognizably Taylor. It’s a silhouette that is staple for her and is no surprise to me that it’s what she’d opt to style the outfit with here.

Typically, we’ve most seen this style of shoe in the form of a fully enclosed loafer. Perhaps I should see this ‘slingback’ style as a meeting in the middle 😉 I do +1 and appreciate the “sandwich styling” with consistent black accessories that keeps the entire outfit cohesive.

Illustration by Amelia Noyes

[alexanderwales]

There's a beautiful model of time travel called hypertime, which so far as I know was invented by qntm. You can read about it here.

The general idea is that there's an infinite stack of universes, possibly with a "prime" universe, each temporally offset from each other by some small amount (or just being continuous). You can imagine all of time on a chart where a properly sloped diagonal defines a specific time (e.g. January 1st, 2001), every horizontal line defines a single universe from its past to present, and every vertical line defines multiple universes that are "initially" arranged so that they're equivalent to "down" being backward in time and "up" being forward in time.

My plan was to write a fanfic of the NBC show Timeless using this model, rather than the one they use in the show. I see now that this was hugely more ambitious than Timeless ever deserved.

The big thing that keeps drawing me to this idea like a moth to flame is that there are cool things you can do with it. Here's one of them: a person goes to what they think of as "back in time", which is actually "down" on the time sheet, and ends up in a past that's different from the one they remember. How cool is that??

You intend to go to the past to see what's on Nixon's missing 18 minutes, and instead find yourself in a universe where the Nazis won WWII. And if you're operating under the assumption your time machine works like the one in Back to the Future, you're suddenly extremely confused. So you go back in time again, heading to just before the outbreak of WWII, and ... it's completely normal, with no sign that anyone has been monkeying around.

This is my white whale of a scene: the revelation that it all actually does make sense, the unfolding implications, the machinations of all the major time traveling factions and their goals.

I'm not actually sure that such a scene can be written in such a way that the majority of the audience would get it. Hypertime is hellish. Diagrams would help, but I'm not sure how much, especially because one of the things that (this subset of) hypertime assumes is some level of determinism and the inability to talk about "when" things happen except using reference frames.

As an added bonus, hypertime makes it possible to have diverse scenarios such that you can be wrong about how time travel works multiple times. You start out thinking that it's a stable time loop, you eventually see that contradicted and realize that it must be branching timelines, you see that contradicted and decide that it's ripple effect, and you see that contradicted and end up realizing that you're in this stupidly complicated hypertime setup. It has the potential to be the most complicated time travel story of all time. It has the potential to have the greatest number of explanations of time travel in a story, many of them incorrect.

I am at the point where I have an almost intuitive understanding of hypertime, but it took me drawing a lot of diagrams to get there, and I'm not sure I possess the writerly ability to explain it properly, especially if there are misdirects built into it.

A man can dream though.

[lowkeyrobin]

FIVE HARGREEVES ; now you're gone, out of reach

summary ; you end up disappearing due to the kugelblitz and five gets drunk as hell at the wedding after finding out

warnings ; language, talk about death & loss, five being drunk

disclaimers ; five is reminded of reader with fruity things, scents, drinks etc

track ; cigarettes, david kushner

word count ; 1.3k

masterlist

You were just some un-powered love interest to Five Hargreeves, having traveled to the ends of the universe and back with him. You'd also been stuck in your pubescent body, due to some accidents at the Commission.

But they were gone now, for the most part.

You and Five never really made it official, so to say. Too much trying to save the world and restarting your lives over and over again for it.

But as you sat at the bar in the Hotel Obsidian, you old, retired skinbags who didn't seem to age had finally worked out your romantic problems. Apparently, the space time continuum wouldn't allow you two to be any further than five feet away from each other, fate dragging you out to Pennsylvania to join Klaus on a road trip.

You were far enough away from the first wave that snatched the lobsters, avoiding it by a few feet on that dark night. You'd avoided death like another character in Final Destination.

You stuck by him like your life depended on it, unknowing of your soon-to-come fate.

After nearly avoiding another wave of the Kugelblitz, which sucked up a shit ton of cows by the Amish where Klaus supposedly came from, you all knew something was up. Not because you'd been sucked away, but because cows don't just disappear. Neither do lobster, but no one ever takes you seriously. You needed a break, maybe you hallucinated it, right?

Like how Five apparently hallucinated ever knowing you, right?

Upon returning to the Hotel Obisidian, you run up to your room, hoping to retrieve a comfort item from your room, at least a blanket, to cope with the oncoming stress.

And then, you never returned.

Five assumed you probably fell asleep, and didn't bat an eye when his newfound lover never returned from their room that afternoon. The grandfather paradox was explained to the Hargreeves siblings, informing themselves of what they'd done to the timeline, fucking it up enough for it to want to destroy itself, creating a black hole of sorts to eat everything up.

It ate everything up within a million miles radius, other than the powered individuals and the hotel itself which had gone untouched, other than you, of course.

Upon realizing that he hadn't seen you in damn near days, and that the theories and excuses that you were asleep or out on an adventure couldn't be true, Five searches the Hotel Obsidian for you. He wished to see you again, wanting to drag you onto the dance floor and slow dance with you at his side, his brothers and their lovers feet away doing the same, staring into each other's eyes like there was no tomorrow, because there wasn't.

As he enters your room, a light, fruity smell burrows into his nose. A warm yellow, quilted blanket lays on your bed, vertically scrunched like you were holding it before disappearing into thin air.

The fear grasps onto Five like nothing had before. His chest tightens like his ribs were suffocating his lungs and heart, his mind racing a million miles an hour.

He forgot you weren't one of them. You were just... you. Normal.

He searches the room top to bottom, praying to God that this wasn't some sort of sick prank. But, with no trace, he accepts the truth, realizing you'd faded into the fabric of the universe.

Soft, salty tears pour down his cheeks.

His last day on Earth and he couldn't even spend it with you.

How many days had you been gone without him even batting an eye?

His ignorance caused your disappearance, not that you weren't protected by the locked safe known as the Hotel Obsisidian, which remained untouched for the most part by the Kugelblitz. You didn't have that special little barrier that came with the children born on October 1st 1989. You couldn't have been protected anywhere you went.

As the world crumbles around him, Five solemnly trails down the many flights of stairs back down to the bar, trying to keep his spirit lifted for his brother's wedding. He couldn't be weak now, not in a time for final celebration before his pain would be relieved, everything he had to internally die for to be lifted away.

A long, perilous journey waits for him among the stairs.

"Don't die, Mr. Five."

Christ, he could hear Pogo a million light years away warning him.

He sits at the bar alone, his mind drifting to another world as he absent mindedly drinks himself to death. Behind him dances Luther and Sloane, enjoying their first dance together.

Aftward, Diego and Lila join them on the dance floor. Accompanying them is Klaus, Ben, and Viktor.

Five maintains his seat at the bar, trying to fuck himself up as much as possible.

He looks over his shoulder, seeing Diego and Lila enthusiastically bouncing around, enjoying their last memories together.

That should've been you and him. He should've had you wrapped in his arms, spinning you around out there with colorful lights blanketed over your bodies. He wanted to feel you pressed against him, fingers intertwined as you danced in that ballroom for the first and last time. He wanted to remember every good and bad moment with you one more time before you both became another speck of dust for the stars.

Viktor, concerned, approaches Five, knowing of the events of your disappearance. Five was the only one who couldn't push past the loss at the moment, which was obvious. He sits down next to his brother, a glass of some sort of alcohol stored in a small shot glass in his hand.

"You alright?" He asks.

"Good as I'll ever be" Five slurs, resting his head on his left hand, his elbow perched on the bar counter.

"Miss Y/n, don't you?" Viktor frowns, rubbing Five's back in an attempt to comfort him.

Five nods, taking another chug from his vodka, the strong, sour taste on his tongue causing him to cringe. "Just wish I had more time. Like, the light that guided me through the dark is just gone. All lights turned off can't be turned on, I guess"

"That's oddly poetic" Viktor chuckles. "Your inner old man will always be stuck deep down inside of you, huh?"

"Says you." The physically younger man laughs, "You're what? Thirty-four? How long were you stuck in the sixties?"

"Dude, it was like a month"

"Whoops"

The two laugh loudly, drunk out of their minds to ease the hurt of imminent death rolling upon them. They look back at their family, dancing, smiling, enjoying their time together. They smile, knowing that even at the end of it all, they'd be happy together.

That's all it took.

Five mixes himself up a pineapple refresher to try and settle his liver, not trying to let organ failure take him before the Kugelblitz did. As he remembers, he's brought back to memories of you and him at a bar back in the sixties, sipping on some fruity margaritas in Dallas.

"Fuck it, I need something stronger"

"Something stronger and you'll end up jumping off the roof within the hour"

"Where's Klaus the alcoholic know-it-all when you need him?..."

As the hotel crumbles around them deep in the night, Five sleeps, blacked out, with your yellow blanket beside him. It reeked of a citrus scent, reminding him of you.

His tired, baggy eyes and messily hair speak volumes if his slurred speech before he knocked himself out didn't. He awaits to see you again in the fabric of the universe, awaiting to be scooped away as he slumbers one last night, this time, alone.

As he begins dissolving into stardust, he dreams of relaxing on a quiet beach with you, the smell of fruit stuck in his nose, colorful, patterned shirts covering your chests loosely.

At least he was able to find peace in your absence.

You were gone and out of reach, but even with that, he'd find a way to get to you, to reach you just one last time.

[divinector]

Responsive Vertical Timeline Flexbox

[brimstonetrees]

I want to talk about V1 being developed for combat on the Earthmovers

The new lore that dropped really puts into perspective why V1 moves and fights like it does. On a normal battlefield V1’s agility would be useful but it would be far more effective to optimize things like the guttermen, machines with heavy armor and powerful weapons, as opposed to putting a whole lot of time and money into developing something that has more maneuverability but could go down from less damage. Maneuverability on the battlefield is essential for any machine to truly function as a war machine but the greater machines that had been developed before V1 have already demonstrated their ability to proficiently navigate a normal battlefield scenario so the factor of excess maneuverability wouldn’t exactly be something that dominates a battlefield filled with machines of greater defense and firepower.

However at the time V1 was being created normal battlefields no longer existed, the war was now being fought on the earthmovers and with the chaotic terrain that made up that area vertical maneuverability became much more important. Sure the greater machines can fight on an earthmover, but they are severely limited by the cramped spaces causing the ones with more explosive firepower to damage themselves and their allies, and the complex geography restricting where they could reach. And as seen with how most of the machines in layer 7 arrive by being dropped via a bomb casing, the only way for the greater machines to infiltrate the earthmovers would be to be dropped in from a plane (which poses it's own risks of being shot from the sky by the earthmovers weapons system).

This is where the V models come in. V1's advanced maneuverability allows it to effortlessly navigate and dominate the general terrain of the earthmover, the ability to cling to walls and jump as high as it does makes it one of the only machines that wouldn't be neutralized if it was forced off one of the earthmovers many edges and it's agility allows it to reach spaces that other enemies couldn't reliably damage them from. V1 has the ability to completely skip though entire areas that could be blocked off or heavily guarded against the standard war machines due to its ability to climb through the terrain, which additionally gives it the advantage of being able to infiltrate from below providing a much safer route (as it would be inefficient if the earthmover could use it's cannon to shoot out it's own legs).

V1 also has immense versatility in it weapons proficiency as opposed to most other greater machines. In the cramped narrow walkways along the edges it can make precise controlled shots that wont risk damage to itself, but in more open areas it can utilize larger explosions to contend with the more heavily armored machines. This combined with it's advance maneuverability allows V1 to fight on the earthmovers in a way that tougher enemies can't reliably counter.\

The lore of Ultrakill has always been very fascinating to me and I love how now we have a clearer timeline for the production of the machines and how V1 came to be. V1 being developed for battle on the earthmovers before the New Peace was established makes so much sense in retrospect given it's abilities.

[pedge-page]

Joel dealing with Preggo Wife drabble (?): Sundae Surprise

Notes: I've still got more adventures for these two, I'm just writing little scenes that may or may not be Canon and jumping around the timeline at this point idk just ENJOY THE IDEA OF IT:

- - - -

You're playing on the old Gameboy Joel dug up out of storage, legs propped up on the couch on this hot-ass-fuck Sunday afternoon. You had been given strict orders to take it easy and lounge these last few days before the baby arrives.

Easy.

Your thumbs are furiously clicking, eyebrowns furrowed as you try for the 23rd time to pass the level youre stuck on.

"Joel. Can you get me chocolate syrup and a can of cool whip."

"No. You've had too much sugar today. Need to keep your heart rate down, due any minute."

"Daddy..." you pout with a head tilt and innocent begging voice to entice him.

"Mmm," he mocks with a far cry minic of your high pitched tone, still not looking at you as he twiddles with his tools on the creaky bolts of the dining table. "Still no."

You roll your eyes, dropping the game box on the coffee table. You drumb your fingertips on your ever so quiet belly all scrunched up under your massive breasts.

You know for a fact this baby isnt coming any time soon since she's so silent today. Joel's been too overly anxious with the due date approaching literally this week. Keeps fixing shit around the house like it's going to make him ease his worry. He's already replaced the lightbulb in the bathroom that was perfectly fine, adjusted the creaky hinge of the front door, re-caulked the kitchen sink back splash, but damn the dining room table--which you have no idea had something wrong with it but Joel's been giving it hella attention while you sit around bored out of your mind.

Momma's instinct will tell you when this baby is ready to pop. But right now you NEED to guzzle chocolate syrup and whip cream down your throat like a frat party bukake or SOMEBODY (not to name any names--but its Joel) is sleeping on the couch tonight.

You think a little bit before it clicks.

You gasp excitedly--a little too over the top, "She's kicking!"

But Joel is so on edge he doesn't even question it, running straight for you and kneeling by the couch, his whiskers scratching the smooth expanse of your skin as he rests his ear flat on your belly.

"Hear that?" You encourage.

But it's quiet.

"No....no," but he wants to so badly, wants to believe his baby is gonna tell him something, and he thinks maybe ...? "wait, wait, yeah, she says 'daddy's here'--"

"No, she says bring me some fucking chocolate syrup and whip cream."

He pulls away and narrows his eyes at you before disappointingly getting on his feet and going to the fridge.

You eagerly tilt your head back, sticking your tongue out, hands clasped merrily as he presses the nozzle of the can and shhhhhh it into you mouth, getting revenge by intentionally over filling too much for you to be able to close your lips around it. Then he drizzles the chocolate syrup on top, making your mouth a vertical Sundae.

You try to swallow around the concoction, lips pursing to encase the top of the pile, but it's all too much and you choke a little bit, sending a miniaturized cannon of white cream and dark sauce splattering back on to Joel's nose.

With a gasping mouth full of ice cream toppings, you chortle over laughing and kicking your feet comically while clapping your hands, desperate to swallow the mess and breathe a lung full of air at the same time through your teary eyes.

Joel just puts his hands on his hips, letting you have your laugh at him.

Then you gasp out loud--the panicked, serious, bone chilling one where you stop laughing and kicking altogether, lips trembling and terrified as your hand drifts south to cup your lower belly, feeling a sudden rush of liquid staining your bum, and that dreaded big something has abruptly DROPPED inside you.

You slowly bring your wide eyes back at Joel, who's tight lipped gaze matches yours of tense panic despite the glob of Cool Whip hanging off his snout.

You gargle with the sugary fluffy dessert still in your mouth, "Mah wawa bwoke."

-

Series Masterlist

Permanent taglist

@harriedandharassed @lola8888673 @its-nebuleuse @zliteraturehoe @merz-8 @joeldjarin @pascalscoffin @pedroshotwifey @ghostslillady @innerpersonunknown @missladym1981 @mrs-oharaxx @survivingandenduring @milla-frenchy @cockykookiee @fairytale07 @daddy-din @pedropascalsbbg @spookyxsam @somehopeatlast @millercontracting @pedrostories @mishala005 @theoraekenslover

[anyataylorjoys]

Someone asked me how I created the fade transition in this gifset which I’ll try to explain in the most comprehensive way that I can. If you've never done something like this before, I suggest reading through the full tutorial before attempting it so you know what you'll need to plan for.

To follow, you should have:

basic knowledge of how to make gifs in photoshop

some familiarity with the concept of how keyframes work

patience

Difficulty level: Moderate/advanced

Prep + overview

First and foremost, make the two gifs you'll be using. Both will need to have about the same amount of frames.

For ref the gif in my example is 540x540.

I recommend around 60-70 frames max total for a big gif, which can be pushing it if both are in color, then I would aim for 50-60. My gif has a total of 74 frames which I finessed using lossy and this will be explained in Part 4.

⚠️ IMPORTANT: when overlaying two or more gifs and when using key frames, you MUST set your frame delay to 0.03 fps for each gif, which can be changed to 0.05 fps or anything else that you want after converting the combined canvas back into frames. But both gifs have to be set to 0.03 before you convert them to timeline to avoid duplicated frames that don't match up, resulting in an unpleasantly choppy finish.

Part 1: Getting Started

Drag one of your gifs onto the other so they're both on the same canvas.

The gif that your canvas is fading FROM (Gif 1) should be on top of the gif it is fading INTO (Gif 2).

And here's a visual of the order in which your layers should appear by the end of this tutorial, so you know what you're working toward achieving:

Part 2: Creating the grid

Go to: View > Guides > New guide layout

I chose 5 columns and 5 rows to get the result of 25 squares.

The more rows and columns you choose, the more work you'll have to do, and the faster your squares will have to fade out so keep that in mind. I wouldn't recommend any more than 25 squares for this type of transition.

To save time, duplicate the line you've created 3 more times, or as many times as needed (key shortcut: CMD +J) and move each one to align with the guides both horizontally and vertically. You won't need to recreate the lines on the edges of the canvas, only the ones that will show.

After you complete this step, you will no longer need the guides so you can go back in and clear them.

Follow the same duplicating process for the squares with the rectangle tool using the lines you've created.

Align the squares inside the grid lines. The squares should not overlap the lines but fit precisely inside them.

This might take a few tries for each because although to the eye, the squares look all exactly the same size, you'll notice that if you try to use the same duplicated square for every single one without alterations, many of them will be a few pixels off and you'll have to transform the paths to fit.

To do this go to edit > transform path and hold down the command key with the control key as you move one edge to fill the space.

Once you're done, put all the squares in their separate group, which needs to be sandwiched between Gif 1 and Gif 2.

Right click Gif 1 and choose "create clipping mask" from the drop down to mask it to the squares group. This step is super important.

After this point, I also took the opacity of the line groups down to about 40% so the lines wouldn't be so bold. Doing this revealed some squares that needed fixing so even if you aren't going dim the lines, I recommend clicking off the visibility of the lines for a moment to make sure everything is covered properly.

Part 3A: Prep For Key framing

I wanted my squares to fade out in a random-like fashion and if you want the same effect, you will have to decide which squares you want to fade out first, or reversely, which parts of Gif 2 you want to be revealed first.

In order to see what's going on underneath, I made Gif 1 invisible and turned down the opacity of the squares group.

If you want text underneath to be revealed when the squares fade away, I would add that now, and place the text group above Gif 2, but under the squares group.

Make a mental note that where your text is placed and the order in which it will be revealed is also something you will have to plan for.

With the move tool, click on the first square you want to fade out. Every time you click on a square, it will reveal itself in your layers.

I chose A3 to be the first square to fade and I'm gonna move this one to the very top of all the other square layers.

So if I click on D2 next, that layer would need to be moved under the A3 layer and so on. You'll go back and forth between doing this and adding key frames to each one. As you go along, it's crucial that you put them in order from top to bottom and highly suggested that you rename the layers (numerically for example) which will make it easier to see where you've left off as your dragging the layers into place.

Part 3B: Adding the Keyframes

This is where we enter the gates of hell things become tedious.

Open up the squares group in the timeline panel so you can see all the clips.

Here is my example of the general pattern that's followed and its corresponding layers of what you want to achieve when you're finished:

So let’s try it!

Expand the control time magnification all the way to the right so you can see every frame per second.

As shown in Part 3A, select your first chosen square.

Where you place the time-indicator on the panel will indicate the placement of the keyframe. Click on the clock next to opacity to place your first keyframe.

Move the time-indicator over 3 frames and place the next key frame.

Things to consider before moving forward:

Where you place your very first keyframe will be detrimental. If you're using a lot of squares like I did, you may have to start the transition sooner than preferred.

If you're doing 25 squares, the key frames will have to be more condensed which means more overlapping because more frames are required to finish the transition, verses if you're only using a 9-squared grid. See Part 4 for more detailed examples of this.

The opacity will remain at 100% for every initial key frame, and the second one will be at 0%.

Instead of creating two keyframes like this and changing the opacities for every single clip, you can copy the keyframes and paste them onto the other clips by click-dragging your mouse over both of them and they'll both turn yellow. Then right click one of the keyframes and hit copy.

Now drop down to your next clip, move your time-indicator if necessary to the spot where the first keyframe will start and click the clock to create one. Then right click it and hit "paste".

Tip: When you have both keyframes selected, you can also move them side to side by click-dragging one of them while both are highlighted.

Your full repetitive process in steps will go as follows:

click on square of choice on the canvas

drag that square layer to the top under the last renamed

in timeline panel: drop down to next clip, move time-indicator tick to your chosen spot for the next keyframe

create new keyframe

right click new keyframe & paste copied keyframes

repeat until you've done this with every square in the group

Now you can change the opacity of your squares layer group back to 100% and turn on the visibility of Gif 1. Then hit play to see the magic happen.

PART 4: Finished examples

Example 1

the transition starts too soon Cause: initial keyframe was placed at frame 0

the squares fade away too quickly Cause: overlapping keyframes, seen below. (this may be the ideal way to go with more squares, but for only 9, it's too fast)

Example 2

more frame time for first gif

transition wraps up at a good point Cause: in this instance, the first keyframe was placed 9 frames in, and the keyframes are not overlapping. The sequential pair starts where the last pair ended, creating a slower fade of each square.

Part 5: Final Tips and Saving

You can dl my save action here which will convert everything back into frames, change the frame rate to 0.05 and open the export window so you can see the size of the gif immediately.

If it's over 10gb, one way to finesse this is by use of lossy. By definition, lossy “compresses by removing background data” and therefore quality can be lost when pushed too far. But for most gifs, I have not noticed a deterioration in quality at all when saving with lossy until you start getting into 15-20 or higher, then it will start eating away at your gif so keep it minimal.

If you've done this and your gif is losing a noticeable amount of quality and you still haven’t gotten it below 10gb, you will have no choice but to start deleting frames.

When it comes to transitions like this one, sometimes you can't spare a single frame and if this is the case, you will have to return to the timeline state in your history and condense the key frames to fade out quicker so you can shorten the gif. You should always save a history point before converting so you have a bookmark to go back to in case this happens.

That's pretty much it, free to shoot me an ask on here or on @jugheadjones with any questions.

[timelineblock]

In the world of WordPress, keeping track of content revisions and changes has always been a crucial aspect of content management. With the evolution of Gutenberg, WordPress's block-based editor, managing content has become more intuitive and dynamic. However, tracking changes over time within Gutenberg itself has remained a challenge – until now. Enter the Gutenberg Timeline Plugin, a revolutionary tool that brings a new dimension to content management within WordPress. In this article, we'll delve into the features, benefits, and impact of this innovative plugin.